| KindEditor上传图片和修改图片 | 您所在的位置：网站首页 › kindEditor上传图片自动限制大小 › KindEditor上传图片和修改图片 |
KindEditor上传图片和修改图片
|
1.首先就是下载KindEditor（这里是官网的地址） 2. 部署编辑器 解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/ Note 您可以根据需求删除以下目录后上传到服务器。 asp - ASP程序 asp.net - ASP.NET程序 php - PHP程序 jsp - JSP程序 examples - 演示文件 3 修改HTML页面 在需要显示编辑器的位置添加textarea输入框。 Note id在当前页面必须是唯一的值。 在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>, 具体的地址更具地址的路径来 5 初始化 var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="describe"]', { minHeight:'350px', allowFileManager : true, uploadJson : '/tIg/uploadOK', afterUpload: function(){this.sync();}, //图片上传后，将上传内容同步到textarea中 afterBlur: function(){this.sync();}, 失去焦点时，将上传内容同步到textarea中 }) });编辑器的内容是可以自己选择的，根据自己的十几需求来，我就是全部需求，不做修改，这里不多做解释 [ ‘source’, ‘|’, ‘undo’, ‘redo’, ‘|’, ‘preview’, ‘print’, ‘template’, ‘code’, ‘cut’, ‘copy’, ‘paste’, ‘plainpaste’, ‘wordpaste’, ‘|’, ‘justifyleft’, ‘justifycenter’, ‘justifyright’, ‘justifyfull’, ‘insertorderedlist’, ‘insertunorderedlist’, ‘indent’, ‘outdent’, ‘subscript’, ‘superscript’, ‘clearhtml’, ‘quickformat’, ‘selectall’, ‘|’, ‘fullscreen’, ‘/’, ‘formatblock’, ‘fontname’, ‘fontsize’, ‘|’, ‘forecolor’, ‘hilitecolor’, ‘bold’, ‘italic’, ‘underline’, ‘strikethrough’, ‘lineheight’, ‘removeformat’, ‘|’, ‘image’, ‘multiimage’, ‘flash’, ‘media’, ‘insertfile’, ‘table’, ‘hr’, ‘emoticons’, ‘baidumap’, ‘pagebreak’, ‘anchor’, ‘link’, ‘unlink’, ‘|’, ‘about’ ] 6上传图片 var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="describe"]', { minHeight:'350px', allowFileManager : true, uploadJson : '/tIg/uploadOK', afterUpload: function(){this.sync();}, //图片上传后，将上传内容同步到textarea中 afterBlur: function(){this.sync();}, 失去焦点时，将上传内容同步到textarea中 }) });uploadJson 后面就是你在后台处理的地址 @RequestMapping(value="uploadOK") public @ResponseBody String uploadOK(@RequestParam("imgFile") CommonsMultipartFile[] files, HttpServletRequest request, Map model, HttpServletResponse response){ JSONObject jb=new JSONObject(); jb.put("error", 0); //文件保存目录路径 //定义允许上传的文件扩展名 HashMap extMap = new HashMap(); extMap.put("image", "gif,jpg,jpeg,png,bmp"); extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小 long maxSize = 1024 * 1024 *2; if(!ServletFileUpload.isMultipartContent(request)){ jb.put("error", 1); jb.put("message", "请选择文件"); return jb.toJSONString(); } String dirName =request.getParameter("dir"); if (dirName == null) { dirName = "image"; } if(!extMap.containsKey(dirName)){ jb.put("error", 1); jb.put("message", "目录名不正确"); return jb.toJSONString(); } try { if (files!=null&&files.length>0) { for (CommonsMultipartFile commonsMultipartFile : files) { Map upload = mySftp.upload(commonsMultipartFile); jb.put("error", 0); jb.put("message", "上传成功！"); jb.put("url",返回的一定要是绝对的路径); return jb.toJSONString(); } } } catch (Exception e1) { jb.put("error", 1); jb.put("message", e1.getMessage()); return jb.toJSONString(); } return jb.toJSONString(); }切记返回的一定会是图片的绝对路劲 不然是编辑器里面是显示不出来的 应为他找不到图片在哪里 使用的是sftp上传 贴出代码 public Map upload(MultipartFile oldFile) { Map map = new HashMap(); // 验证是否登陆成功 if (!connectLogin()) { logger.info("sftp服务器登录失败！"); map.put("info", "sftp服务器登录失败！"); return map; } String oldName = oldFile.getOriginalFilename(); String type = oldName.substring(oldName.lastIndexOf(".") + 1);// 获取后缀名 if (oldFile != null) { if (type != null) { if (("GIF".equals(type.toUpperCase()) || "PNG".equals(type.toUpperCase()) || "JPG".equals(type.toUpperCase()) || "JPEG".equals(type.toUpperCase()))) { String trueName = System.currentTimeMillis() + Math.random() * 10 + "." + type; // 随机数作为名称 File file = new File(trueName); try { sftp.cd(ftpConfig.getFtpPath()); InputStream inputStream = oldFile.getInputStream(); sftp.put(inputStream, file.getName()); map.put("path", trueName); map.put("info", "图片添加成功"); return map; } catch (Exception e) { e.printStackTrace(); } } } else { map.put("info", "格式不正确"); return map; } } else { map.put("info", "文件夹为空！！！"); return map; } return null; }ok 上传就可以了 然后是整个form表单的提交，使用的是FormData $scope.processForm = function(){ var flag = $("#myForm").valid(); var formData = new FormData($("#myForm" )[0]); if(flag){ $.ajax({ url: '/tIg/tIg_add?oper=1' , type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (data) { var info = $.parseJSON(data); var msg = info.msg; if(msg == "true"){ var curId = window.parent.document.getElementById("curId").value; var listWin = window.parent.document.getElementById("iframe"+curId); var scope = listWin.contentWindow.angular.element('#Job_list').scope(); scope.searchList(); top.layer.alert(info.msgInfo, {icon: 6}); $("#btnmysave").addClass(" disabled"); $("#btnmysave").attr("disabled","disabled"); $scope.myreadonly = true; $scope.myreadonly = true; }else{ top.layer.alert(info.msgInfo, {icon: 6}); } } }); } }后台正常的接受就是了 ，编辑器里面的图片都会换成img 标签存放在数据库，下面就是一个样本 3333333333333333333333333333333最后就是修改页面的照片显示问题了，有的是可以直接显示但是有的因为页面加载的问题不可以显示出来，请先确实页面是否可以取到值，确认可以但是编辑器拿不到值的话 可以这样是试一下（初始化文本编辑器和之前的一样复制过来就可以了） $scope.url = "/tIg/tIg_edit?oper=1&id="+$scope.id; $http.post($scope.url).success(function(data){ var msg = data.msg; if(msg == "true"){ $scope.tIg = data.record; $scope.tts = data.tIgts; // 设置HTML内容 editor.html($scope.tIg.describe); }else if(msg == "norecord"){ alert(data.msgInfo); } });editor.html($scope.tIg.describe);请求获取到数据之后 手动的设置数据 希望帮到大家！！ |
【本文地址】